<!DOCTYPE html>
<!--
Copyright 2011 Google Inc. All Rights Reserved.

Use of this source code is governed by a BSD-type license.
See the COPYING file for details.
-->

<style type="text/excss">
  #foo {
    background: #FCF;
  }

  #bar {
    color: red;
  }

  @borderize(green);
</style>

<script src="../../excss.js" explicit=true></script>
<script>

var g = CSS.Grammar;
var BorderizeGrammar = {
  statement: g.first(g.g('var_decl'), g.g('trait'), g.g('ruleset'), 
                     g.g('keyframes'), g.g('borderize')),
  borderize: ["@borderize", g.SS, "(", g.SS, g.g('value'), g.SS, ")", g.SS]
};

g.patch(BorderizeGrammar);

CSS.CallbackRegistry.patch({
  value: function(s) {
    this.currentValue = s;
  },
  borderize: function(s) {
    this.jso.borderize = this.currentValue;
  }
});

CSS.Printer.registerExtension(function(jso, vars) {
  var result = "";
  if (jso.borderize) {
    var color = jso.borderize;
    for (var i = 0; i < jso.rulesets.length; i++) {
      result += jso.rulesets[i].selector + " { border: solid 1px " + color + "; }\n"
    }  
  }
  return result;
});

window.CSS.run();

</script>
<script src="../tests.js"></script>

<div id="foo" expect="border-left-color: green; border-left-width: 1px">Foo</div>
<div id="far" expect="border-left-color: black; border-left-width: 0px">Far</div>
<div id="bar" expect="border-left-color: green; border-left-width: 1px">Bar</div>
